import { lazy } from "react";
import { createBrowserRouter, Navigate } from "react-router-dom";
import MainLayout from "../pages/layout/MainLayout";
import {
  AppOutline,
  MessageFill,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons'
// import Home from "../pages/home";
// import Login from "../pages/login";

const Login = lazy(() => import('../pages/login'))
const Home = lazy(() => import('../pages/home'))

// 这里放的都是有底部导航页面
export const childrenRoutes = [
    {path:'/layout/home', element: <Home />,title: "首页", icon: <AppOutline />, },
    {path:'/layout/order', element: <div >订单</div>, title: "订单",  icon: <UnorderedListOutline />,},
    {path:'/layout/socket', element: <div >聊天</div>, title: "聊天", icon: <MessageFill />},
    {path:'/layout/user', element: <div >我的</div>, title: "我的", icon: <UserOutline />},

]

const routers = createBrowserRouter([
    // 不需要使用嵌套路由，实现布局共享的都写在这里
    // 如果需要共享布局，则使用嵌套路由，写在外面作为2级以上的路由配置
    {path:"/login", element: <Login />},
    {path:"/404", element: <div>404</div>},
    {path:"/layout", element: <MainLayout />, children: childrenRoutes},
    {path:'*', element:<div>404</div>},
    {path:'/', element:<Navigate to="/layout/home" />} // 当访问的路径是 / 的时候，直接跳转到 /layout/home
])

export default routers